<script setup lang="ts">
import { Empty } from 'ant-design-vue'
import { FileOutlined, ArrowRightOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import type { ClassificationType } from '@/models/Classification/Classification'
import { useClassificationData } from '@/hooks/Classification/useClassificationData'

const router = useRouter()

const { tree, loading, initData } = useClassificationData()
initData()
function toRandomTesting(code: string, type: ClassificationType) {
  router.push({
    name: 'RandomTesting',
    query: { code, type },
  })
}
</script>

<template>
  <BaseLayout>
    <WithHeaderLayout>
      <template #header>
        <UserInfo style="margin-right: 20px"></UserInfo>
      </template>
      <ASpin wrapperClassName="spin-wrapper" :spinning="loading">
        <div class="continer">
          <template v-if="!tree.length">
            <AEmpty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无子分类"></AEmpty>
          </template>
          <template v-for="classification of tree" :key="classification.id">
            <ACard :title="classification.value" class="classification-card">
              <template #extra>
                <AButton
                  type="link"
                  @click="toRandomTesting(classification.code, classification.type)"
                >
                  刷题
                </AButton>
              </template>
              <template v-if="!classification.children || !classification.children.length">
                <AEmpty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无子分类"></AEmpty>
              </template>
              <template v-else>
                <ARow>
                  <template
                    v-for="secondaryClassification of classification.children"
                    :key="secondaryClassification.id"
                  >
                    <ACol :span="24" :sm="12" :lg="12" :xl="8" :xxl="6">
                      <ACardGrid class="secondary-classification-card">
                        <div class="secondary-classification-card-content">
                          <div class="left-img">
                            <template v-if="!secondaryClassification.img">
                              <AAvatar shape="square">
                                <template #icon>
                                  <FileOutlined />
                                </template>
                              </AAvatar>
                            </template>
                            <template v-else>
                              <AAvatar shape="square" :src="secondaryClassification.img" />
                            </template>
                          </div>
                          <div class="center-continer">
                            <div class="top-text">{{ secondaryClassification.value }}</div>
                            <div class="bottom-text">
                              {{ secondaryClassification.description || '-' }}
                            </div>
                          </div>
                          <AButton
                            type="text"
                            class="to-test-btn"
                            @click="
                              toRandomTesting(
                                secondaryClassification.code,
                                secondaryClassification.type,
                              )
                            "
                          >
                            <ArrowRightOutlined />
                          </AButton>
                        </div>
                      </ACardGrid>
                    </ACol>
                  </template>
                </ARow>
              </template>
            </ACard>
          </template>
        </div>
      </ASpin>
    </WithHeaderLayout>
  </BaseLayout>
</template>

<style lang="less" scoped>
.spin-wrapper {
  display: block;
  height: 100%;
  flex: auto;
  :deep(.ant-spin-container) {
    height: 100%;
  }
}

.continer {
  width: 100%;
  padding: 16px;

  :deep(.ant-card-head) {
    padding-right: 8px;
  }
  :deep(.ant-card-body) {
    padding: 0;
  }

  .classification-card {
    margin-bottom: 16px;
  }

  .secondary-classification-card {
    width: 100%;
    .secondary-classification-card-content {
      display: flex;
      align-items: center;

      .left-img {
        flex: none;
      }

      .center-continer {
        margin: 0 16px;
        flex: auto;

        .top-text {
          line-height: 24px;
          font-weight: 500;
          font-size: 14px;
          color: #262626;
        }
        .bottom-text {
          font-weight: 400;
          font-size: 12px;
          line-height: 20px;
          color: #8a8f8d;
        }
      }

      .to-test-btn {
        flex: none;
        padding: 4px 8px;
      }
    }
  }
}
</style>
